<template class="login_template">
    <div class="background" :style="{backgroundImage:'url('+require('../assets/pic3.jpg')+')'}">
    <!-- 血泪教训——:model 与 :rules 必须对应 -->
      <el-form :rules="rules" :model="registerForm" class="login-container" label-position="left"
             ref="form" label-width="0px" v-loading="loading" justify="center">
        <h3 class="login_title">网上书城注册</h3>
        <el-form-item prop="userName">
          <el-input type="text" v-model="registerForm.userName" auto-complete="off" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="registerForm.password" auto-complete="off" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item prop="passAgain">
          <el-input type="password" v-model="registerForm.passAgain" auto-complete="off" placeholder="确认密码"></el-input>
        </el-form-item>
        <el-form-item prop="nickName">
          <el-input type="text" v-model="registerForm.nickName" auto-complete="off" placeholder="用户昵称"></el-input>
        </el-form-item>
        <el-form-item prop="mobilephone">
          <el-input type="text" v-model="registerForm.mobilephone" auto-complete="off" placeholder="电话号码"></el-input>
        </el-form-item>
        <el-form-item prop="address">
          <el-input type="text" v-model="registerForm.address" auto-complete="off" placeholder="地址"></el-input>
        </el-form-item>
        <el-form-item prop="email">
          <el-input type="text" v-model="registerForm.email" auto-complete="off" placeholder="电子邮箱"></el-input>
        </el-form-item>
        <el-form-item style="width: 100%">
          <el-button type="primary" @click.native.prevent="submitClick" style="width: 100%">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>
<script>
  import {postRequest} from '../utils/api'
  import {putRequest} from '../utils/api'
  import {myPostRequest} from '../utils/api'

  
  export default{
    data(){
        var validatePassAgain = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.registerForm.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        var validatePhone = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入手机号码'));
            } else if (value.length != 11) {
                callback(new Error('手机号码格式不正确！'));
            } else {
                callback();
            }
        }
      return {
        rules: {
          userName: [{required: true, message: '请输入用户名', trigger: 'blur'}],
          password: [{required: true, message: '请输入密码', trigger: 'blur'}],
          passAgain: [{validator: validatePassAgain, trigger: 'blur'}],
          nickName: [{required: true, message: '请输入昵称', trigger: 'blur'}],
          mobilephone: [{validator: validatePhone, trigger: 'blur'}],
          address: [{required: true, message: '请输入家庭地址', trigger: 'blur'}],
          email: [{required: true, message: '请输入邮箱', trigger: 'blur'}]
        },
        checked: true,
        registerForm: {
          userName: '',
          password: '',
          passAgain: '',
          nickName: '',
          mobilephone: '',
          address: '',
          email: ''
        },
        loading: false,
      }
    },
    methods: {
      submitClick: function () {
        var _this = this;
        this.loading = true;
        delete this.registerForm.passAgain;
        myPostRequest('user/register', this.registerForm).then(
            resp => {
                _this.loading = false;
                if(resp.data.code == 0) {
                    _this.$message({
                        message: '注册成功，即将为您跳转到登录页面',
                        type: 'success'
                    });
                    this.$router.replace({path: '/', query: {userName: this.registerForm.userName}});
                } else {
                    _this.$message.error('很遗憾，注册失败！请重试');
                    _this.registerForm['passAgain'] = '';
                }
            },
            resp => {
                _this.loading = false;
                _this.registerForm['passAgain'] = '';
            }
        )
      },
    }
  }
</script>
<style scoped>
  .login-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin:  auto auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
    height: 70vh;
    float: center;
    filter:alpha(opacity); 
    opacity:0.7;
    position: absolute;
    left: 500px;
    top:100px;
  }

  .login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }

  .login_remember {
    margin: 0px 0px 35px 0px;
    text-align: left;
  }

  .background{
    width: 100%;
    height: 100%;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    top: 0px;
    left: 0px;
    /* padding-top: 100hv; */
  }

</style>
